<template>
  <div class="page">
    <div class="van-nav-head">
      <van-nav-bar title="更复杂验证" left-arrow @click-left="$router.go(-1)" :fixed="true"/>
    </div>
    <div class="padding">
      <div class="form-box">
        <van-field v-model="formData.nickname" placeholder="请输入昵称" label="昵称"/>

        <van-field v-model="formData.qq" placeholder="请输入QQ号" maxlength="11" type="number" label="QQ号"/>

        <van-field v-model="formData.wechat" placeholder="微信号或者手机号 选填" maxlength="20" type="text" label="微信号"/>

        <!-- 输入密码 -->
        <van-field v-model="formData.password"
                   placeholder="请输入密码"
                   :type="showPass?'text':'password'"
                   :right-icon="showPass?'eye-o':'closed-eye'"
                   @click-right-icon="onShowPass('password')"
                   label="密码"/>

        <!-- 确认密码 -->
        <van-field v-model="formData.passwordok"
                   placeholder="请确认密码"
                   :type="showPassok?'text':'password'"
                   :right-icon="showPassok?'eye-o':'closed-eye'"
                   @click-right-icon="onShowPass('passwordok')"
                   label="确认密码"/>

        <van-field name="sex" label="性别">
          <template #input>
            <van-radio-group v-model="formData.sex" direction="horizontal">
              <van-radio name="2">保密</van-radio>
              <van-radio name="1">男</van-radio>
              <van-radio name="0">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </div>
    </div>

    <div class="padding">
      <van-button block type="info" @click="onSubmit">
        提交
      </van-button>
    </div>

  </div>
</template>

<script type="es6">
let validator = {
  "nickname": {
    name: "昵称",
    required: {msg: "请输入您的昵称"},
    type: "userName",
  },
  "qq": {
    name: "QQ号",
    type: "qqNum",
  },
  "wechat": {
    name: "微信号",
    required: false,
    type: "phone|wxNum",
  },
  "password": {
    name: "密码",
    type: [
      {
        value: "len6_16",
        msg: "密码必须是6-16位之间"
      },
      {
        value: "passwordSymbol",
        msg: "密码有不符合的字符"
      },
    ]
  },
  "passwordok": {
    name: "确认密码",
    callback: function (data, self) {
      if (data.password !== data.passwordok) {
        return "两次密码不一致"
      } else {
        return false;
      }
    }
  }
}
export default {
  name: "",
  components: {},
  data() {
    return {
      showPass: false,
      showPassok: false,
      formData: {
        nickname: "ok-mini",
        qq: "13665879854",
        wechat: "ok-mini",
        password: "aaaaa",
        passwordok: "",
        sex: "0",
      }
    };
  },
  mounted() {
  },
  methods: {
    onSubmit() {
      let formData = this.formData;
      let self = this;
      let bool = this.$utils.formValidator(formData, validator, self);
      if (bool) {
        this.$toast.error(bool.msg);
      } else {
        this.$dialog.alert({
          title: 'ok-mini 表单验证',
          message: JSON.stringify(formData),
        });
      }
    },
    onShowPass(type) {
      if ("password" == type) {
        this.showPass = !this.showPass;
      } else if ("passwordok" == type) {
        this.showPassok = !this.showPassok;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form-box {
  border-radius: 10px;
  overflow: hidden;
}
</style>